<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html;charset=UTF-8" encoding="UTF-8">
    <h:head>

    </h:head>

    <h:body>

        <h:form id="form">
            <p:messages id="messages" showDetail="true" closable="true">
                <p:autoUpdate/>
            </p:messages>

            <p:panelGrid layout="flex" columns="2">
                <p:outputLabel for="val1" value="Value 1" />
                <p:inputText id="val1" value="#{messages001.val1}" />

                <p:outputLabel for="val2" value="Value 2" />
                <p:inputText id="val2" value="#{messages001.val2}" />
            </p:panelGrid>

            <p:commandButton id="buttonAction1" update="@form" value="Action 1" action="#{messages001.action1}"/>
            <p:commandButton id="buttonAction2" update="@form" value="Action 2" action="#{messages001.action2}"/>
        </h:form>

    </h:body>
</f:view>

</html>